<template>
  <div class="lucky_wheel">
    <div id="main" class="wheel_main">
      <div class="wheel_tit"></div>
      <div class="wheel_sub">好运伴你行，赶快来抽奖吧！</div>
      <div class="msg wheel_msg"></div>
      <div class="demo wheel_box">
        <!-- 梦泉特殊处理 -->
        <div id="disk2" class="wheel_disk wheel_disk2" v-if="is_show_more==1">
          <div v-for="(item,index) in gameprizeinfo" :key="'name'+index" :class="'gameprize_name gameprize_name'+index">
            {{handleTitle(item.prize_title)}}
          </div>
          <div v-for="(item,index) in gameprizeinfo" :key="'txt'+index" :class="'gameprize_txt gameprize_txt'+index">
            {{thanks}}
          </div>
        </div>

        <div id="disk" class="wheel_disk" v-else-if="is_show_more==-1"></div>
        <!--<if condition='$need_subscribe'>class="fxBtn-publicode"<else/>id="startbtn"</if>-->
        <div
          @click="handleClickRotate"
          id="start" class="wheel_start">
          <img :style="`transform: rotate(${rotateWheel}deg)`" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/pointer.png">
        </div>
      </div>

      <div class="x-same wheel_top_dzp" style="margin-top:0;">
        <div class="x-img">
          <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/xian.png">
          <b>活动奖品</b>
        </div>
        <div v-if="is_show_more==1">
          <ul class="prize-list" v-if="gameprizeinfo && gameprizeinfo.length > 0">
            <li v-for="(item,index) in gameprizeinfo" :key="index">
              <span v-if="index==0">一等奖</span>
              <span v-if="index==1">二等奖</span>
              <span v-if="index==2">三等奖</span>
              <span v-if="index==3">四等奖</span>
              <span v-if="index==4">五等奖</span>
              <span v-if="index==5">普通奖</span>
              <span>{{item.msg}}</span>
            </li>
          </ul>
        </div>
        <div v-else-if="is_show_more==-1">
          <ul class="prize-list" v-if="gameprizeinfo && gameprizeinfo.length > 0">
            <li>一等奖：{{ gameprizeinfo[0].msg }} </li>
            <li>二等奖：{{ gameprizeinfo[1].msg }} </li>
            <li>三等奖：{{ gameprizeinfo[2].msg }} </li>
            <li>普通奖：{{ gameprizeinfo[3].msg }}</li>
          </ul>
        </div>
      </div>
      <div class="x-same wheel_int_dzp">
        <div class="x-img">
          <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/xian.png">
          <b>活动时间</b>
        </div>
        <p>{{ gameinfo.start_time }} 至 {{ gameinfo.end_time }}</p>
      </div>
      <div class="x-same wheel_int_dzp">
        <div class="x-img">
          <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/xian.png">
          <b>活动规则</b>
        </div>
        <div class="align-left">
          <p class="wordWrap">{{ gameinfo.description }}</p>
          <p v-if="gameinfo.cost_point > 0">游戏消耗{{ point_name }} {{ gameinfo.cost_point }}</p>
          <p v-if="gameinfo.give_point > 0">参与游戏即送{{ gameinfo.give_point }}{{ point_name }},
            <span v-if="gameinfo.give_point_to_no_prize_only == 1">仅送给未中奖的用户.</span>
          </p>
        </div>
      </div>

      <div class="win-record x-same">
        <div class="x-img">
          <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/xian.png">
          <b>中奖排名</b>
        </div>
        <p class="goto">
          <a @click="JumpTo">查看我的奖品>></a>
        </p>
        <div class="win-nav">
          <span>昵称</span>
          <span>奖品</span>
          <span>等级</span>
          <span>中奖时间</span>
        </div>
        <ul>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text=""
            @load="onLoad"
          >
            <li v-for="(item, index) in winerLists" :key="index">
              <span class="win-name">{{ item.nickname }}</span>
              <span class="win-award">{{ item.winer }}</span>
              <span class="win-award">{{ item.level }}</span>
              <span class="win-time">{{ item.create_time }}</span>
            </li>
          </van-list>
        </ul>
      </div>

      <game-result-dialog
        :visible.sync="gameResultVisible"
        :game_prize_id="game_prize_id"        :fail_url="fail_url"
        :getGamePrize="getGamePrize"
        @gameReload="gameReload"></game-result-dialog>

    </div>
    <share-shade ref="shareShades"></share-shade>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
    <shop-code ref="shopCode" :fromType="1"></shop-code>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { List, Dialog } from 'vant'
  Vue.use(List).use(Dialog)

  import SmallLogin from '@/components/SmallLogin/smallLogin.vue'
  import { getTitle } from '@/utils/index'
  import shareShade from '@/components/wxShare/shareShade'
  import ShopCode from '@/components/ShopCode'
  import gameResultDialog from '../components/gameResultDialog'
  import { activityGame, playGames } from '@/api/marketGame/gameList'
  import { mpShare } from '@/utils/utils'
  import small from '@/smallapp/small'
  import { refreshPage } from '@/utils/utils'

  export default Vue.extend({
    name: 'index',
    data() {
      return {
        loading: false,
        finished: false,
        gameResultVisible: false, // 游戏结果弹窗
        need_subscribe: 0,
        rotateWheel: 0,
        gameinfo: {},
        gameprizeinfo: [],
        is_show_more: 0, // 是否显示6等奖.0表示接口未请求完毕，-1老逻辑1-3等奖和普通奖，1为特殊处理，1-5等奖和普通奖
        thanks: '谢谢参与', // 谢谢参与文案
        fail_url: '', // 未中奖跳转链接
        point_name: '',
        cost_point: '',
        give_point: '',
        winerLists: [],
        postData: {
          type: 1,
          id: '',
          order_id: '',
          p: 1
        },
        game_prize_id: '', // 获奖数据
        getGamePrize: false, // 中奖或是未中奖
        shareInfo: {},
        postParm: {},
        smallQuery: {}
      }
    },
    components: {
      gameResultDialog,
      shareShade,
      SmallLogin,
      ShopCode
    },
    methods: {
      onLoad() {
        this.activityGameFn()
      },
      handleTitle(title) {
        return getTitle(title)
      },
      JumpTo() {
        this.$JumpName(this, 'prize-list')
      },
      /**
       * 点击转盘指针按钮
       */
      handleClickRotate() {
        // TODO 每次开始之前先把指针角度变为0
        document.querySelector('.wheel_start img').classList.remove('duration0')
        this.rotateWheel = 3600
        this.$loadingWrap.show()

        playGames(this.postParm).then(res => {
          this.$loadingWrap.close()
          const resData = res.data
          if (res.status == 1) {
            setTimeout(() => {
              this.gameResultVisible = true
              document.querySelector('.wheel_start img').classList.add('duration0')
              this.rotateWheel = 0
            }, 6000)
            if (resData.game_parameter) {
              this.rotateWheel = 3600 + resData.game_parameter.ds.angle
              this.game_prize_id = res.data.game_parameter.game_prize_id
              if (resData.game_parameter.ds && resData.game_parameter.ds.winning_value == 1) {
                this.getGamePrize = true
              } else {
                this.getGamePrize = false
                if (resData.game_parameter.notwinning) {
                  const baseMsg = this.gameinfo.give_point > 0 ? `,别灰心参与也有${this.gameinfo.give_point}${this.point_name}` : ''
                  const noPrizeMsg = resData.game_parameter.notwinning + baseMsg
                  this.game_prize_id.noPrizeMsg = noPrizeMsg
                }
              }
            }
          }  else {
            this.getGamePrize = false
            if (resData.check_mothed && resData.check_mothed == 1) { // 当后台开启需要推荐多少人可以获取次数的时候进行展示
              Dialog.confirm({
                title: '抽奖次数已耗尽',
                message: `以下方式可以获得抽奖次数哦～\n每推荐${resData.recommend_number}名新用户注册，即可获得1次抽奖机会`,
                className: 'common-confirm',
                closeOnClickOverlay: true,
                showCancelButton: false,
                confirmButtonText: '去分享'
              }).then(() => {
                document.querySelector('.wheel_start img').classList.add('duration0')
                this.rotateWheel = 0
                this.$refs.shareShades.showShade = true
                // on confirm
              }).catch(() => {
                // on cancel
              })
            } else {
              this.$Error(res.msg)
            }
          }
        })
      },
      /**
       * 游戏的默认请求
       */
      activityGameFn() {
        activityGame(this.postParm).then(res => {
          if (res.status == 1) {
            const resData = res.data
            this.need_subscribe = resData.need_subscribe
            if (resData.need_subscribe == 1) {
              this.$refs.shopCode.dialogVisible = true
              return false
            }
            this.gameprizeinfo = resData.gameprizeinfo
            this.is_show_more = resData.is_show_more || '-1'
            this.thanks = resData.gameinfo.thanks || '谢谢参与'
            this.fail_url = resData.gameinfo.fail_url
            this.winerLists = this.winerLists.concat(resData.winer_lists)
            this.gameinfo = resData.gameinfo
            this.point_name = resData.point_name
            this.cost_point = resData.cost_point
            this.give_point = resData.give_point
            // 加载状态结束
            this.loading = false
            if (resData.winer_lists.length < 10) {
              this.finished = true
            }
            this.shareInfo = {
              title: resData.jsapi_title,
              imgUrl: resData.jsapi_img,
              shareParam: resData.jsapi_url.split('?')[1]
            }
            this.postParm.p++
            mpShare(true, false, '/activity/pages/luckyWheel/index', this.shareInfo)
          } else {
            // this.$Error(res.msg)
          }
        })
      },
      init() {
        this.$refs.shareShades.showShade = false
        const param = Object.assign({}, this.postData)
        param.id = this.smallQuery.id
        // console.log('init..***', this.$route)
        if (this.smallQuery.order_id) {
          param.order_id = this.smallQuery.order_id
        }
        this.postParm = param
        this.activityGameFn()
      },
      gameReload(){
        this.activityGameFn()
      }
    },
    mounted() {
      window.addEventListener('wxload', (query) => {
        // scene=3015nqnq0b2f39e0d
        this.smallQuery = Object.assign(this.$route.query, query)
        // console.log('this.smallQuery11', this.smallQuery)
        this.init(this.smallQuery)
      })


      // this.init()
      // TODO 小程序触底加载更多
      
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
      window.addEventListener('wxshow', () => {
        small.HandleShareParams()
        if(!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
        }
      })
      window.$$subscribe('loginReload', reload => {
        if (reload) {
          this.init()
        }
      })
    }
  })
</script>

<style lang="scss">
  @import 'src/styles/game.scss';
  .miniprogram-root {
    .van-dialog__message {
      line-height: 40px;
    }
  }
  .lucky_wheel{
    padding-top: 20px;
    background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/wheelbj.png) no-repeat #e94630 center;
    background-size: cover;
    text-align: center;
    .members_bottom section:first-child a{
      color: #fff;
    }

    /*大转盘游戏样式*/

    /*标题样式*/

    .wheel_tit{
      margin: 0 auto;
      width: 534px;
      height: 371px;
      background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/tit.png) no-repeat;
      background-size:100%;
    }

    /*副标题样式*/

    .wheel_sub{
      font-size: 36px;
      line-height: 80px;
      text-align: center;
      color:#FDFED6;
      height: 80px;
      margin: 40px auto 60px;
      padding:0px 40px;
      /*background-color: rgba(213, 53, 32, 0.32);*/
      border-radius: 56px;
      border: 1px solid #FDFED6;
      display: inline-block;
    }

    .wheel_box {
      width: 640px;
      position: relative;
      margin: 0 auto;
      overflow: hidden;
      padding-top:0!important;
    }

    .wheel_disk {
      width: 600px;
      height: 600px;
      margin: 0 auto;
      background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/wheel_wrap.gif) no-repeat;
      background-size: 600px;
      overflow: hidden;

      // 梦泉特殊处理大转盘
      &.wheel_disk2{
        position:relative;
        background-image: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/wheel_wrap2.gif);
        .gameprize_name,.gameprize_txt{
          overflow:hidden;
          position: absolute;
          width:120px;
          left: 0;
          right:0;
          top: 0;
          z-index: 2;
          margin:auto;
          font-size:24px;
          color:#A87330;
          transform: translate(0, 0) rotate(0);
          transform-origin: center bottom;
        }
        .gameprize_name0{
          transform: translate(54px, 72px) rotate(15deg);
        }
        .gameprize_name1{
          transform: translate(200px, 220px) rotate(74deg);
        }
        .gameprize_name2{
          transform: translate(142px, 416px) rotate(134deg);
        }
        .gameprize_name3{
          transform: translate(-50px, 468px) rotate(196deg);
        }
        .gameprize_name4{
          transform: translate(-196px, 324px) rotate(256deg);
        }
        .gameprize_name5{
          transform: translate(-140px, 128px) rotate(318deg);
        } 
        .gameprize_txt0{
          transform: translate(146px, 124px) rotate(43deg);
        }
        .gameprize_txt1{
          transform: translate(196px, 324px) rotate(105deg);
        }
        .gameprize_txt2{
          transform: translate(50px, 468px) rotate(164deg);
        }
        .gameprize_txt3{
          transform: translate(-140px, 412px) rotate(222deg);
        }
        .gameprize_txt4{
          transform: translate(-192px, 218px) rotate(282deg);
        }
        .gameprize_txt5{
          transform: translate(-52px, 76px) rotate(342deg);
        }
      }
    }

    .wheel_start {
      width: 220px;
      height: 248px;
      position: absolute;
      top: 156px!important;
      left: 212px;
    }

    .wheel_start img {
      cursor: pointer;
      width: 220px;
      height: 248px;
      transform-origin:50% 57%;/*定义动画的旋转中心点*/
      -ms-transform-origin:50% 57%;         /* IE 9 */
      -webkit-transform-origin:50% 57%;  /* Safari 和 Chrome */
      -moz-transform-origin:50% 57%;     /* Firefox */
      -o-transform-origin:50% 57%;       /* Opera */
      transition: all 5s cubic-bezier(.2,.93,.43,1);
    }
    .wheel_start img.duration0 {
      transition: none;
    }

    .wheel_main .x-same {
      color: #fee58c;
      margin: 0 20px;
      overflow: hidden;
      .x-img{
        margin:7% 0 7% 6%;
        position: relative;
        img{
          width:100%;
        }
      }
      .align-left{
        text-align: left;
      }
      .prize-list{
        text-align: left;
      }
    }

    .wheel_main .x-same b {
      display: block;
      letter-spacing:14px;
      font-size: 32px;
      font-weight: bold;
      position: absolute;
      top: 0px;
      left: 49%;
      transform: translate(-50%);
    }

    .wheel_top_dzp ul li {
      line-height: 50px;
      margin-left:5%;
      font-size: 26px;
      letter-spacing: 2px;
      display: block;
    }

    .wheel_int_dzp p {
      line-height: 50px;
      margin-left:5%;
      font-size: 26px;
      letter-spacing: 2px;
    }

    .wheel_int_dzp pre {
      color: #fee58c;
      line-height: 50px;
      margin-left:3%;
      font-size: 26px;
      letter-spacing: 2px;
    }
    .support p{
      color:#fff;
    }

    // .game-result{
    //   width: 560px;
    //   height: 592px;
    //   position: relative;
    //   &.success{
    //     background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/result_bg2.png) no-repeat;
    //     background-size:100% auto;
    //   }
    //   &.fail{
    //     background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/result_bg.png) no-repeat;
    //     background-size:100% auto;
    //   }
    //   &-wrap{
    //     padding-top: 210px;
    //     color: #AF3C0E;
    //     .txt1{
    //       font-size: 30px;
    //     }
    //     .txt2{
    //       font-size: 26px;
    //       width: 70%;
    //       margin: 25px auto;
    //       line-height: 36px;
    //     }
    //     .img{
    //       margin-top: 20px;
    //       img{
    //         width: 80px;
    //       }
    //     }
    //     .btn{
    //       position: absolute;
    //       bottom: 50px;
    //       width: 100%;
    //       text-align: center;
    //       img{
    //         width: 460px;
    //       }
    //     }
    //   }
    // }
    // .game-close{
    //   text-align: center;
    //   padding-top: 30px;
    //   img{
    //     width: 75px;
    //   }
    // }
  }

</style>
